<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">视频管理</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 栅格 -->
            <el-row :gutter="20">
                <el-col :span="14">
                    <el-button type="primary" @click="clickCoursefun">添加视频</el-button>
                </el-col>
                <el-col :span="10">
                    <el-input placeholder="关键词" v-model="searchdata" class="input-with-select" clearable
                        @clear="getCourse">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <el-table class="tabletop" :border="true" :data="CoursetableData" style="width: 100%">
                <el-table-column label="封面" width="220px">
                    <template slot-scope="scope">
                        <img style="max-width: 200px; margin: 10px;" :src="scope.row.cover" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column label="时长">
                    <template slot-scope="scope">
                            {{scope.row.seconds | dateFormat }}
                    </template>
                </el-table-column>
                <el-table-column prop="credit" label="学分">
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.ctime | dataFilter }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editCoursefun(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="delCoursefun(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="Courselist._page" :page-sizes="[10, 20, 30, 40]" :page-size="Courselist._size" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        <!-- 弹出的对话框 -->
        <el-dialog :title="truefalse == false ? '添加视频列表' : '修改视频列表'" :before-close="Closethewindow"
            :visible.sync="dialogVisible" width="50%">
            <!-- 表单 -->
            <el-form :model="dialogBox" :rules="dialogBoxrules" ref="dialogBoxrules" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="视频标题" prop="title">
                    <el-input v-model="dialogBox.title"></el-input>
                </el-form-item>
                <el-form-item label="视频连接" prop="video">
                    <el-input v-model="dialogBox.video"></el-input>
                </el-form-item>
                <el-form-item label="视频长度" prop="seconds">
                    <el-input v-model="dialogBox.seconds" suffix-icon="el-icon-date"></el-input>
                </el-form-item>
                <el-form-item label="学分数" prop="credit">
                    <el-input v-model="dialogBox.credit"></el-input>
                </el-form-item>
                <el-form-item label="课程类型" prop="isElective">
                    <el-radio v-model="dialogBox.isElective" label="0">必修课</el-radio>
                    <el-radio v-model="dialogBox.isElective" label="1">选修课</el-radio>
                </el-form-item>
                <!-- 上传图片 -->
                <el-form-item label="上传图片">
                    <!-- action 图片上传的api地址 -->
                    <el-upload class="upload-demo" :action="RequestAddress" :on-preview="handlePreview"
                        :on-remove="handleRemove" :on-success="handSuccess" list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="Closethewindow">取 消</el-button>
                <el-button type="primary" @click="addCoursefun">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { GetCourseList, AddCourse, EditCourse, DelCourse } from '../api/Course.js'
export default {
    data() {
        return {
            // 数据存储
            CoursetableData: [],
            // 搜索框绑定数值
            searchdata: '',
            // 分页器绑定的请求数据
            Courselist: {
                _orderd: 'recommend,ctime',
                _page: 0,
                _size: 10
            },
            // 总条数
            total: 0,
            // 对话框的显示和隐藏
            dialogVisible: false,
            // 对话框里绑定的数据
            dialogBox: {
                title: '',
                video: '',
                seconds: '',
                credit: '',
                isElective: '' * 1,
                cover: ''
            },
            // 表单验证
            dialogBoxrules: {
                title: [
                    { required: true, message: '请输入视频标题', trigger: 'blur' }
                ],
                video: [
                    { required: true, message: '请输入视频链接', trigger: 'blur' }
                ],
                seconds: [
                    { required: true, message: '请输入视频长度', trigger: 'blur' }
                ],
                credit: [
                    { required: true, message: '请输入学分数', trigger: 'blur' }
                ],
                isElective: [
                    { required: true, message: '请选择课程类型', trigger: 'blur' }
                ],
            },
            // 上传图片的地址
            RequestAddress: 'http://vlearn2206b.daweilab.com/uploader/oss',
            // 控制添加和编辑的切换
            truefalse: false,
            // 编辑数据存放
            editdata: {}

        }
    },
    created() {
        this.getCourse()
    },
    methods: {
        // 每页条数发生变化时
        handleSizeChange(val) {
            this.Courselist._size = val
            this.getCourse()
        },
        // 页码发生变化时
        handleCurrentChange(val) {
            this.Courselist._page = val
            this.getCourse()
        },
        // 搜索点击按钮
        async search() {
            const params = {
                _search: this.searchdata,
                _orderd: this.Courselist._orderd,
                _page: this.Courselist._page,
                _size: this.Courselist._size
            }
            const { data } = await GetCourseList(params)
            console.log(data);
            if (data.code !== 1) return this.$message.error('搜索视频管理列表内容失败')
            this.CoursetableData = data.list
            this.total = data.pager.total
        },
        // 点击添加按钮和编辑事件
        clickCoursefun() {
            this.truefalse = false
            this.dialogVisible = true
        },
        // 编辑对话框
        editCoursefun(row) {
            console.log(row);
            this.truefalse = true
            this.dialogVisible = true
            this.dialogBox = {
                title: row.title,
                video: row.video,
                seconds: row.seconds,
                credit: row.credit,
                isElective: row.isElective + '',
                cover: row.cover
            }
            this.editdata = this.dialogBox
            this.editdata.id = row.id
        },
        // 点击确定按钮
        addCoursefun() {
            this.$refs.dialogBoxrules.validate((v) => {
                if (!v) return
                if (this.truefalse == false) {
                    // 请求添加接口
                    this.addCourse()
                } else {
                    this.editCourse()
                }
                // 触发关闭对话框
                this.Closethewindow()
                // 刷新数据列表
                this.getCourse()
            })
        },
        // 处理图片预览效果
        handlePreview() { },
        // 图片点击叉号触发
        handleRemove() { },
        // 图片上传成功后的钩子
        handSuccess(response) {
            console.log(response);
            response.files.forEach(res => {
                // 把获取到 的 url 地址赋值
                this.dialogBox.cover = res.url
            });
        },
        // 删除
        async delCoursefun(row) {
            const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirm !== 'confirm') return this.$message.info('已取消')
            this.delCourse(row.id)
        },
        // 关闭对话框事件
        Closethewindow() {
            this.dialogVisible = false
            this.dialogBox.title = ''
            this.dialogBox.video = ''
            this.dialogBox.seconds = ''
            this.dialogBox.credit = ''
            this.dialogBox.isElective = ''
            this.dialogBox.cover = ''
            this.editdata = {}
        },
        // 请求区😎😎😎😎😎
        // 列表数据渲染
        async getCourse() {
            const { data } = await GetCourseList(this.Courselist)
            if (data.code !== 1) return this.$message.error('获取视频管理列表失败')
            console.log(data);
            // 数据赋值
            this.CoursetableData = data.list
            // 总条数赋值
            this.total = data.pager.total
        },
        // 添加
        async addCourse() {
            const { data } = await AddCourse(this.dialogBox)
            if (data.code !== 1) return this.$message.error('添加失败')
            this.$message.success('添加成功')
        },
        // 修改
        async editCourse() {
            const { data } = await EditCourse(this.editdata)
            if (data.code !== 1) return this.$message.error('修改失败')
            this.$message.success('修改成功')
        },
        // 删除
        async delCourse(id) {
            const { data } = await DelCourse({ id })
            if (data.code !== 1) return this.$message.error('删除失败')
            this.$message.success('删除成功')
            this.getCourse()
        }
    }
}
</script>

<style scoped>

</style>